<template>
	<!-- 商品秒杀 -->
	<view class="Seckill" >
		<view class="nav_title" >
			<view :style="{position: scrollY == true? 'fixed':'static', top:statusBarHeight+44+'px'}" :class="['top_nav',scrollY == true?'pad':'']">
				<p class="title">
					<view style="font-weight: bold;margin-top: 20rpx;">军供到家</view>
					<!-- <image src="../../static/img/miaosha.png" mode=""></image> -->
			   </p>
					<!-- #ifdef MP-WEIXIN -->
					<!-- <button open-type="share" class="fx_btn" :style="{background:colors.color}"><image src="../../static/img/home/fenxiang.png" mode="" class="ewm"></image></button> -->
					<!-- #endif -->
					<!-- #ifdef H5 -->
					<!-- <image src="../../static/img/home/fenxiang.png" mode="" class="h5ewm" :style="{background:colors.color}" @tap="jumpMyQr"></image> -->
					<!-- #endif -->
				<scroll-view class="times" scroll-x :scroll-left="scrollleft" scroll-with-animation>
					<view :style="{background: current == index && hours >= item.start_hour ? colors.color : ''}" v-for="(item, index) in goodsData" :key="index" @click="setCurrent(item,index)">{{ item.title}}</view>
				</scroll-view>
			</view>
			<view v-if="scrollY == true" style="opacity: 0;">
				<p class="title"><text>商品秒杀</text></p>
					<!-- #ifdef MP-WEIXIN -->
					<!-- <button open-type="share" class="fx_btn" :style="{background:colors.color}"><image src="../../static/img/home/fenxiang.png" mode="" class="ewm"></image></button> -->
					<!-- #endif -->
					<!-- #ifdef H5 -->
					<!-- <image src="../../static/img/home/fenxiang.png" mode="" class="h5ewm" :style="{background:colors.color}" @tap="jumpMyQr"></image> -->
					<!-- #endif -->
				<scroll-view class="times" scroll-x :scroll-left="scrollleft" scroll-with-animation>
					<view :style="{background: current == index && hours >= item.start_hour ? colors.color : ''}" v-for="(item, index) in goodsData" :key="index" @click="setCurrent(item,index)">{{ item.title}}</view>
				</scroll-view>
			</view>	
			<view class="scroll">
				<view class="list_s" v-for="(item,index) in newdata" :key="index" >
					<image :src="item.img" mode="" @click="jumpGood(item)"></image>
					<view class="goods_right">
						<p class="p1" @click="jumpGood(item)">
							<image :src="item.tag_img" mode="" v-if="item.tag_type==2"></image>
							<text class="hot" v-if="item.tag_type== 1" :style="{backgroundColor: colors.color}">{{item.tag_content}}</text>
							<text class="name">{{item.title}}</text>
						</p>
						<p class="p2">
							<text class="text1">累计{{item.sales}}份</text>
							<text style="margin: 0 10upx;">|</text>
							<text class="text2" :style="{color: colors.color}">剩余{{item.inventory}}份</text>
						</p>
						<p class="p3">
							<text class="text1" :style="{color: colors.color}">¥{{item.price || 0}}</text>
							<text class="text2"  v-if="item.disuse_price">¥{{item.disuse_price}}</text>
						</p>
						<!-- 如果商品不存在商品规格 可以直接添加到购物车-->
						<view style="overflow: hidden;" v-if="item.is_option == 0">
							<p class="goumai" :style="{background: colors.color}"  @click="setCount(item)">立即购买<text v-if="item.count&&item.count !== ''">{{item.count}}</text></p>
						</view>
						<!-- 如果商品存在商品规格 点击弹出规格弹窗 -->
						<view class="sku_btn" @tap="setSku(item)" v-else :style="{ background: colors.color }">选择规格</view>
						
					</view>
				</view>
				<p class="notmore">没有更多了~</p>
			</view>
			<uni-popup ref="popup" type="center" class="pop">
				<view class="sku_box">
					<p class="title">添加到购物车</p>
					<scroll-view scroll-y="true" class="sku_scroll">
						<!-- 第一层 -->
						<view class="lists" v-for="(item, n) in sku" :key="n">
							<p class="sku_name">{{ item.title }}</p>
							<view class="list_box">
								<p
									v-for="(item1, index) in item.goods_spec_item"
									:key="index"
									@click="setSkuList(item1.item_title, n, index)"
									:style="{ color: subIndex[n] == index ? colors.color : '', borderColor: subIndex[n] == index ? colors.color : '' }"
									v-bind:class="[item1.isShow ? '' : 'noneActive', subIndex[n] == index ? 'productActive' : '']"
								>
									{{ item1.item_title }}
								</p>
							</view>
						</view>
					</scroll-view>
					<view class="price_box">
						<p class="kucun">库存：{{ kucun }}</p>
						<view class="number">
							<view class="sub" @tap.stop="sub(row)"><view class="icon jian"></view></view>
							<view class="input" @tap.stop="discard"><input type="number" disabled v-model="number" @input="sum" /></view>
							<view class="add" :style="{ background: number < kucun ? colors.color : '#f2f2f2' }" @tap.stop="add(row)"><view class="icon jia"></view></view>
						</view>
						<p class="p1">
							<text class="text1">已选规格：</text>
							<text class="text2" v-if="item" v-for="(item, index) in selectArr" :key="index">{{ item }}</text>
						</p>
						<view class="bottom">
							<p class="left">￥{{ numprice || 0 }}</p>
							<p class="right" :class="[kucun == 0 ? 'noactive' : '']" @tap="addCartOption">加入购物车</p>
						</view>
					</view>
				</view>
				<image src="../../static/img/close.png" mode="" @tap="close" class="close"></image>
			</uni-popup>
		</view>
	</view>
</template>

<script>
import {getColorCofig, getUserInfo} from '../../static/utils/ahth.js'
import uniPopup from '@/components/uni-popup/uni-popup.vue';
var statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
export default {
	components:{
		uniPopup
	},
	data() {
		return {
			scrollleft: 0,
			current: 0,
			count: 1,
			goodsid:'',
			userInfo: getUserInfo(),
			sku: [],
			subIndex: [],
			skuAllData: [],
			shopItemInfo: {}, //存放要和选中的值进行匹配的数据
			ids: '',
			selectArr: [],
			kucun: 0,
			price: 0,
			optionId: '',
			numprice: '',
			shows: false,
			number: 1,
			statusBarHeight: statusBarHeight,
			newdata:[]
		};
	},
	props:{
		colors:Object,
		goodsData: Array,
		hours: Number,
		scrollY:Boolean,
		heights:Number,
		dates:String,
		dataList:Array
	},
	watch:{
		dates(value){
			console.log('秒杀列表',this.goodsData);
			this.newdata = []
			this.newdata = this.dataList
			for(var i = 0; i< this.newdata.length; i++){
				let data = this.newdata[i]
				if(data.count){
					this.newdata[i].count = ''
				}
			}
			console.log(this.newdata);
		}
	},
	methods: {
		setCurrent(item,index) {
			// if(this.hours >= item.start_hour){
				this.current = index;
				this.scrollleft = index * 90;
				if (index == 1) {
					this.scrollleft = 0;
				}
				console.log(item)
				this.$emit('getSeckllGoods',item)
			// }
		},
		setCount(item){
			if(item.inventory == 0){
				uni.showToast({
					title:'库存不足~',
					icon:'none'
				})
				return
			}
			console.log(item);
			this.addCart(item)
		},
		jumpGood(item){
			console.log(item)
			this.$Router.push({path:'/pagesA/pages/goods/goodsDetails',query:{
				goodid: item.goods_id,
				type: 1
			}})
		},
		ceshi(){
			console.log('执行了',this.goodsData)
		},
		discard(){
			
		},
		getMore(){
			this.$emit('getMore')
		},
		gotop(){
			this.scrollY = false
		},
		addCart(item){//添加到购物车
			var count = ''
			this.request('cart/addCart',{
				goods_id: item.goods_id
			}).then(res=>{
				if(res.code == 200){
					if(item.count && item.count !== ''){
						count = item.count+1
					}else{
						count = 1
					}
					this.$set(item,'count', count)
					console.log(item)
					uni.showToast({
						title:'添加购物车成功',
						icon:'none'
					})
				}
				if(res.code == 400){
					uni.showToast({
						title: res.msg,
						icon:'none'
					})
				}
			})
		},
		setSku(item) {
			//选择商品规格
			console.log(item);
			if(item.inventory == 0){
				uni.showToast({
					title:'库存不足~',
					icon:'none'
				})
				return
			}
			this.selectArr = [];
			this.shopItemInfo = {};
			this.subIndex = [];
			this.price = 0;
			this.kucun = 0;
			this.ids = item.goods_id;
			this.getSkuAll(item);
			this.getSkuList(item);
			setTimeout(() => {
				uni.hideTabBar();
			}, 200);
			this.$refs.popup.open();
		},
		sub(item) {
			//减少商品
			if (this.number == 1) {
				return;
			} else {
				this.number--;
				this.numprice = this.number * this.price;
			}
		},
		add(item) {
			//增加商品到购物车
			if (this.kucun == 0) {
				return;
			}
			if (this.number >= this.kucun) {
				return;
			}
			this.number++;
			this.numprice = this.number * this.price;
		},
		getSkuList(item) {
			//获取商品的规格
			this.request('goods/getGoodsSpecs', {
				goods_id: item.goods_id,
				type: 1
			}).then(res => {
				console.log(res);
				this.sku = res.data;
				this.checkItem(-1);
			});
		},
		getSkuAll(item) {
			//获取商品的所有规格信息 方便匹配对比
			this.request('goods/getGoodsOption', {
				goods_id: item.goods_id,
				type: 1
			}).then(res => {
				console.log(res);
				this.skuAllData = res.data;
				console.log(this.skuAllData);
				this.initializeData();
			});
		},
		close() {
			setTimeout(() => {
				uni.showTabBar();
			}, 200);
			this.$refs.popup.close();
		},
		checkItem(clickIndex) {
			//对规格进行筛选 如果不符合要求的规格不能选择
			var option = this.sku;
			console.log(option)
			var x = '';
			for (let i = 0; i < option.length; i++) {
				//遍历规格列表
				// if (i == clickIndex) {
				// 	continue;
				// }
				let len2 = option[i].goods_spec_item.length;
				console.log('执行了', len2)
				for (let j = 0; j < len2; j++) {
					if (this.subIndex[i] != -1 && j == this.subIndex[i]) {
						continue;
					}
					let choosed_copy = [...this.selectArr];
					this.$set(choosed_copy, i, this.sku[i].goods_spec_item[j].item_title);
					let choosed_copy2 = choosed_copy.filter(item => item !== '' && typeof item !== 'undefined');
					let data = this.selectArr.join('_') || this.selectArr[0];
					console.log(this.selectArr)
					this.skuAllData.forEach(e => {
						if (e.title == data) {
							this.kucun = Number(e.inventory);
							this.price = e.price;
							this.numprice = e.price;
							this.optionId = e.option_id;
							console.log(e);
						}
					});
					if (this.shopItemInfo.hasOwnProperty(choosed_copy2)) {
						this.$set(this.sku[i].goods_spec_item[j], 'isShow', true);
					} else {
						this.$set(this.sku[i].goods_spec_item[j], 'isShow', false);
					}
				}
			}
		},
		initializeData() {
			//计算有多小种可选路径
			console.log('执行了');
			let result = this.skuAllData.reduce(
				(arrs, items) => {
					return arrs.concat(
						items.title.split('_').reduce(
							(arr, item) => {
								return arr.concat(
									arr.map(item2 => {
										//利用对象属性的唯一性实现二维数组去重
										if (!this.shopItemInfo.hasOwnProperty([...item2, item])) {
											this.shopItemInfo[[...item2, item]] = items;
										}
										return [...item2, item];
									})
								);
							},
							[[]]
						)
					);
				},
				[[]]
			);
		},
		setSkuList(item, n, index) {
			//设置规格的选中
			console.log(item);
			this.shows = true;
			if (this.selectArr[n] != item) {
				this.$set(this.selectArr, n, item);
				this.$set(this.subIndex, n, index);
			} else {
				this.$set(this.selectArr, n, '');
				this.$set(this.subIndex, n, -1); //去掉选中颜色
			}
			this.checkItem(n);
		},
		addCartOption() {
			//有规格的添加购物车
			this.request('cart/addCart', {
				goods_id: this.ids,
				option_id: this.optionId,
				num: this.number
			}).then(res => {
				if (res.code == 200) {
					uni.showToast({
						title: '添加购物车成功!'
					});
					this.close();
				}
				if (res.code == 400) {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
				}
			});
		},
	}
};
</script>

<style scoped lang="scss">
	.top_nav{
		overflow: hidden;
		top: 0;
		overflow: hidden;
		background: #fff;
		z-index: 300;
		width: 100%;
		left: 0;
		// transition: all 0.5s;
	}
	.pad{
		padding: 0 30upx;
	}
.Seckill {
	overflow: hidden;
	padding: 0 4%;
	
	.nav_title {
		position: relative;
		border-top: 1rpx solid #F2F2F2;
		.title {
			font-size: 36upx;
			color: #333333;
			overflow: hidden;
			image{
				height: 40upx;
				display: block;
				width: 200upx;
				margin-top: 20upx;
			}
		}
		.fenxiang{
			width:40upx;
			height:40upx;
			padding: 10upx;
			float: right;
			border-radius: 50%;
			background-color: #F23A3A;
			box-sizing: content-box;
			margin-top: 10upx;
		}
		.top_title {
			font-size: 32upx;
			font-family: Droid Sans Fallback;
			font-weight: 400;
			color: rgba(51, 51, 51, 1);
		}
		.fx_btn {
			overflow: hidden;
			position: absolute;
			right: 0upx;
			top: 15upx;
			width: 60upx;
			height: 60upx;
			border: none;
			border-radius: 50%;
			background-color: #f23a3a;
			padding: 0 !important;
		}
		.ewm {
			width: 42upx;
			height: 42upx;
			display: block;
			margin: 0 auto;
			margin-top: 10upx;
		}
		.h5ewm{
			width: 42upx;
			height: 42upx;
			padding: 20upx;
			border-radius: 50%;
			background-color: #f23a3a;
			position: absolute;
			right: 0upx;
			top: 15upx;
			box-sizing: content-box;
		}
	}
}
.goods_scroll{
	max-height: 1200upx;
}
.times {
	width: 100%;
	overflow-x: scroll; /*添加横向滚动条*/
	white-space: nowrap; /*不换行*/
	height: 50upx;
	margin-top: 20upx;
	view {
		display: inline-block;
		padding: 5upx 15upx;
		background-color: #aaaaaa;
		color: #ffffff;
		font-size: 24upx;
		margin-right: 20upx;
	}
	.active {
		background-color: #f23a3a;
	}
}
.list_s {
	box-sizing: border-box;
	background-color: #ffffff;
	overflow: hidden;
	height: 290rpx;
	width: 100%;
	margin-top: 20upx;
	margin-bottom: 20upx;
	box-shadow: 0px 0px 21upx 0px rgba(255, 74, 44, 0.1);
	padding: 28upx;
	padding-right: 10upx;
	border-radius: 10upx;
	padding-left: 20upx;
	image {
		width: 200upx;
		height: 200upx;
		float: left;
		border-radius: 15upx;
		margin-right: 10upx;
		z-index: 20;
	}
	.goods_right{
		position: relative;
		z-index: 10;
	}
	.p1 {
		font-size: 32upx;
		color: #000000;
		min-height: 80upx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		image{
			width: 40upx;
			height: 40upx;
			float: left;
			margin-right: 10upx;
		}
		.hot{
			font-size: 20upx;
			height: 40upx;
			line-height: 40upx;
			padding: 0upx 10upx;
			color: #FFFFFF;
			background-color: #F23A3A;
			border-radius: 8upx;
			margin-right: 10upx;
			box-sizing: border-box;
			display: inline-block;
			transform: translateY(-5rpx);
		}
		.name{
			overflow: hidden;
		}
	}
	.p2 {
		font-size: 24upx;
		height: 26upx;
		line-height: 26upx;
		margin-top: 10upx;
		color: #333333;
		margin-bottom: 10upx;
		.text1 {
			color: #646464;
		}
		.text2 {
			// color: #f23a3a;
		}
	}
	.p3 {
		margin-top: 20upx;
		.text1 {
			font-size: 36upx;
			// color: #f23a3a;
			margin-right: 10upx;
		}
		.text2 {
			font-size: 24upx;
			font-family: Droid Sans Fallback;
			font-weight: 400;
			text-decoration: line-through;
			color: rgba(100, 100, 100, 1);
		}
	}
	.step {
		overflow: hidden;
		position: absolute;
		right: -10upx;
		bottom: -20upx;
		text {
			font-size: 32upx;
			color: #ffffff;
			background-color: #ff0000;
			display: block;
			width: 40upx;
			height: 40upx;
			border-radius: 50%;
			text-align: center;
			line-height: 40upx;
		}
		/deep/.uni-numbox {
			height: 45upx;
			line-height: 40upx;
			width: auto;
			.uni-numbox__minus,
			.uni-numbox__value,
			.uni-numbox__plus {
				height: 40upx;
				line-height: 30upx;
				border: none;
				background-color: #ff0000;
				border-radius: 50%;
				width: 40upx;
				text {
					color: #ffffff;
				}
			}
			.uni-numbox__minus {
				background-color: #ddd !important;
				text {
					background-color: #ddd !important;
				}
			}
			.uni-numbox__value {
				width: 50upx;
				background-color: #fff;
				color: #333;
			}
		}
	}
	.goumai{
		height: 45upx;
		font-size: 22upx;
		color: #FFFFFF;
		line-height: 45upx;
		padding: 0 15upx;
		font-weight: bold;
		border-radius: 15upx;
		text-align: center;
		position: absolute;
		right: 0upx;
		bottom: -55upx;
		padding: 0 15upx;
		>text{
			display: inline-block;
			width: 40upx;
			height: 40upx;
			background-color: #fff;
			border-radius: 50%;
			text-align: center;
			line-height: 40upx;
			font-size: 24upx;
			color: #F23A3A;
			margin-left: 10upx;
		}
	}
}
.goods_right {
		position: relative;
		// overflow: hidden;
		.sku_btn {
			height: 45upx;
			font-size: 22upx;
			color: #FFFFFF;
			background-color: pink;
			line-height: 45upx;
			position: absolute;
			right: 0;
			bottom: -55upx;
			padding: 0 15upx;
			font-weight: bold;
			border-radius: 15upx;
			transition: all 0.3;
			&:active {
				opacity: 0.8;
			}
		}
	}
	.sku_box {
		width: 90vw;
		min-height: 60vh;
		overflow: hidden;
		background-color: #fff;
		border-radius: 20upx;
		box-sizing: border-box;
		padding: 30upx;
		margin-top: 10vh;
		z-index: 990;
		.title {
			font-size: 32upx;
			font-weight: bold;
			color: #333333;
			height: 60upx;
		}
		.sku_scroll {
			height: 50vh;
			overflow: hidden;
			.lists {
				overflow: hidden;
				margin-bottom: 20upx;
				.sku_name {
					color: #999999;
					font-size: 28upx;
				}
				.list_box {
					overflow: hidden;
					p {
						float: left;
						height: 45upx;
						line-height: 45upx;
						padding: 0 30upx;
						border: 1upx solid #eeeeee;
						font-size: 24upx;
						border-radius: 15upx;
						margin-right: 20upx;
						margin-top: 20upx;
						transition: all 0.3s;
					}
				}
			}
		}
	}
	.close {
		height: 80upx;
		width: 80upx;
		border-radius: 50%;
		display: block;
		margin: 0 auto;
		margin-top: 30upx;
	}
	.price_box {
		// height: 10vh;
		.number {
			display: flex;
			float: right;
			overflow: hidden;
			.input {
				width: 50upx;
				height: 50upx;
				margin: 0 10upx;
				// background-color: #f3f3f3;
				input {
					width: 50upx;
					height: 50upx;
					display: flex;
					justify-content: center;
					align-items: center;
					text-align: center;
					font-size: 26upx;
				}
			}
			.sub,
			.add {
				width: 40upx;
				height: 40upx;
				background-color: #f2f2f2;
				border-radius: 50%;
				.icon {
					font-size: 22upx;
					width: 40upx;
					height: 40upx;
					display: flex;
					justify-content: center;
					align-items: center;
					color: #ffffff;
				}
			}
			.add {
				background-color: #ff0000;
			}
			.sub {
				.icon {
					color: #b3b3b3;
				}
			}
		}
		.p1 {
			height: 40upx;
			line-height: 40upx;
			font-size: 28upx;
			.text1 {
				color: #999999;
				font-size: 24upx;
			}
			.text2 {
				color: #333333;
				margin-right: 10upx;
				font-size: 24upx;
			}
		}
		.bottom {
			height: 80upx;
			margin-top: 30upx;
			.left {
				font-size: 40upx;
				color: #f9493d;
				float: left;
				margin-top: 20upx;
			}
			.right {
				float: right;
				padding: 10upx 20upx;
				background-color: #ffd25f;
				color: #333;
				margin-top: 20upx;
				border-radius: 15upx;
			}
			.noactive {
				float: right;
				padding: 10upx 20upx;
				background-color: #ccc;
				opacity: 0.4;
				color: #333;
				pointer-events: none;
				margin-top: 20upx;
				border-radius: 15upx;
			}
		}
	}
	.noneActive {
		//规格禁用
		background-color: #ccc;
		opacity: 0.4;
		color: #000;
		pointer-events: none;
	}
	.productActive {
		border: 1upx solid #1a1a29;
	}
	.kucun {
		color: #999999;
		font-size: 24upx;
		margin-bottom: 5upx;
	}
	.nodatas {
		image {
			width: 160upx;
			height: 160upx;
			display: block;
			margin: 0 auto;
			margin-top: 60upx;
		}
		p {
			text-align: center;
			color: #999999;
			font-size: 24upx;
			margin: 10upx;
		}
	}
	.notmore{
		text-align: center;
		color: #999;
		font-size: 24upx;
		padding-bottom: 20upx;
		margin-top: 20upx;
	}
</style>
<style>
	.uni-popup{
		z-index: 400!important;
	}
</style>
